<template>
  <div class="flex flex-col align-center text-white">
    <div class="relative flex-center">
      <CircleNumber :color="color"></CircleNumber>
      <text class="absolute fz-24 text-bold">18</text>
    </div>
    <div class="title">重大风险</div>
    <transverseLineVue></transverseLineVue>
    <div :style="{color: color}">16%</div>
  </div>
</template>

<script setup>
import CircleNumber from "../icons/circleNumber.vue";
import transverseLineVue from "../icons/transverseLine.vue";
const porp = defineProps({
    color: {
        Type: String,
        default: () => '#FF003A'
    }
})
</script>

<style scoped>
.title {
    color:#00DEFF;
}
</style>